<template>
  <div id="mainCon">
    <div class="s-con">
      <van-tabs type="card">
        <van-tab title="交易物流"></van-tab>
        <van-tab title="通知消息"></van-tab>
        <van-tab title="互动消息"></van-tab>
      </van-tabs>
    </div>
    <!-- 消息列表 -->
    <div class="InfoCon">
      <div class="infoLis">
        <div class="userPhotoWrap">
          <img
            src="https://img.alicdn.com/imgextra/i1/2549841410/TB2OucekjihSKJjy0FiXXcuiFXa_!!2549841410.jpg_430x430q90.jpg"
          >
        </div>
        <div class="info-list-con">
          <div class="info-tit">
            <h4 class="storeName">菜鸟驿站</h4>
            <span class="time">昨天</span>
          </div>
          <div class="info-msg">在吗亲</div>
        </div>
      </div>
      <div class="infoLis">
        <div class="userPhotoWrap">
          <img
            src="https://img.alicdn.com/imgextra/i1/2549841410/TB2OucekjihSKJjy0FiXXcuiFXa_!!2549841410.jpg_430x430q90.jpg"
          >
        </div>
        <div class="info-list-con">
          <div class="info-tit">
            <h4 class="storeName">菜鸟驿站</h4>
            <span class="time">昨天</span>
          </div>
          <div class="info-msg">在吗亲</div>
        </div>
      </div>
      <div class="infoLis">
        <div class="userPhotoWrap">
          <img
            src="https://img.alicdn.com/imgextra/i1/2549841410/TB2OucekjihSKJjy0FiXXcuiFXa_!!2549841410.jpg_430x430q90.jpg"
          >
        </div>
        <div class="info-list-con">
          <div class="info-tit">
            <h4 class="storeName">菜鸟驿站</h4>
            <span class="time">昨天</span>
          </div>
          <div class="info-msg">在吗亲</div>
        </div>
      </div>
      <div class="infoLis">
        <div class="userPhotoWrap">
          <img
            src="https://img.alicdn.com/imgextra/i1/2549841410/TB2OucekjihSKJjy0FiXXcuiFXa_!!2549841410.jpg_430x430q90.jpg"
          >
        </div>
        <div class="info-list-con">
          <div class="info-tit">
            <h4 class="storeName">菜鸟驿站</h4>
            <span class="time">昨天</span>
          </div>
          <div class="info-msg">在吗亲</div>
        </div>
      </div>
      <div class="infoLis">
        <div class="userPhotoWrap">
          <img
            src="https://img.alicdn.com/imgextra/i1/2549841410/TB2OucekjihSKJjy0FiXXcuiFXa_!!2549841410.jpg_430x430q90.jpg"
          >
        </div>
        <div class="info-list-con">
          <div class="info-tit">
            <h4 class="storeName">菜鸟驿站</h4>
            <span class="time">昨天</span>
          </div>
          <div class="info-msg">在吗亲</div>
        </div>
      </div>
      <div class="infoLis">
        <div class="userPhotoWrap">
          <img
            src="https://img.alicdn.com/imgextra/i1/2549841410/TB2OucekjihSKJjy0FiXXcuiFXa_!!2549841410.jpg_430x430q90.jpg"
          >
        </div>
        <div class="info-list-con">
          <div class="info-tit">
            <h4 class="storeName">菜鸟驿站</h4>
            <span class="time">昨天</span>
          </div>
          <div class="info-msg">在吗亲</div>
        </div>
      </div>
      <div class="infoLis">
        <div class="userPhotoWrap">
          <img
            src="https://img.alicdn.com/imgextra/i1/2549841410/TB2OucekjihSKJjy0FiXXcuiFXa_!!2549841410.jpg_430x430q90.jpg"
          >
        </div>
        <div class="info-list-con">
          <div class="info-tit">
            <h4 class="storeName">菜鸟驿站</h4>
            <span class="time">昨天</span>
          </div>
          <div class="info-msg">在吗亲</div>
        </div>
      </div>
      <div class="infoLis">
        <div class="userPhotoWrap">
          <img
            src="https://img.alicdn.com/imgextra/i1/2549841410/TB2OucekjihSKJjy0FiXXcuiFXa_!!2549841410.jpg_430x430q90.jpg"
          >
        </div>
        <div class="info-list-con">
          <div class="info-tit">
            <h4 class="storeName">菜鸟驿站</h4>
            <span class="time">昨天</span>
          </div>
          <div class="info-msg">在吗亲</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style>
.InfoCon {
  padding-left: 10px;
  background: #fff;
}

.infoLis {
  overflow: hidden;
  border-bottom: 1px solid #f8f8f8;
  padding: 8px 0;
}

.userPhotoWrap {
  float: left;
  width: 50px;
  height: 50px;
  overflow: hidden;
  margin-right: 8px;
  border-radius: 4px;
}

.userPhotoWrap img {
  width: 100%;
}

.info-list-con {
  height: 50px;
  padding-right: 8px;
}

.info-list-con .info-tit {
  overflow: hidden;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.7);
}

.info-list-con .storeName {
  float: left;
  font-size: 14px;
}

.info-list-con .time {
  float: right;
  font-size: 12px;
  color: #969799;
}

.info-list-con .info-msg {
  margin-top: 6px;
  text-align: left;
  font-size: 14px;
  color: #999;
}
</style>

